<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		
	</head>

	<body>
		<div class="container-fluid">
			<ol class="breadcrumb">
				<li>
					<i class="fa fa-home"></i>
					<a fref="index.html">Home</a>
				</li>
				<li>
					<span class="">查看用户信息</span>
				</li>
			</ol>

			<div class="mcomment">
				<h3 class="page-header">查看用户信息</h3>
				<!--用户信息搜索-->
				<div class="container-fluid">
					<div class="form-group form-inline">
						<label class="input-group pull-right">
							<span class="input-group-addon">
								<i class="fa fa-search"></i>
							</span>
							<input v-model="searchBox" type="text" class="form-control" placeholder="输入想要搜索用户信息" />
							<span class="input-group-btn">
								<button class="btn btn-default">搜索</button>
							</span>
						</label>

						<!--类型筛选-->
						<label class="">
							<button data-toggle="modal" data-target="#addUserInfo" class="btn btn-warning">添加用户</button>
							<button data-toggle="modal" data-target="#importUserInfo" class="btn btn-primary">导入用户</button>
							<button data-toggle="modal" data-target="#exportUserInfo" class="btn btn-primary">导出用户</button>
						</label>
						<!--类型筛选结束-->
						<hr />
					</div>
				</div>
				<!--用户信息搜索结束-->

				<div>
					<!--列表及操作-->
					<!--操作-->
					<div>
						<!--列表-->
						<div>
							<table class="table table-bordered table-hover table-responsive ">
								<thead>
									<tr>
										<td>
											<strong>序号</strong>
										</td>
										<td>
											<strong>学号</strong>
										</td>
										<td>
											<strong>姓名</strong>
										</td>
										<td>
											<strong>学院</strong>
										</td>
										<td>
											<strong>班级</strong>
										</td>
										<td>
											<strong>操作</strong>
										</td>
									</tr>
								</thead>
								<tr>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td>
										<button data-toggle="modal" data-target="#showUserInfo" class="btn btn-success">查看</button>
										<button data-toggle="modal" data-target="#modifyUserInfo" class="btn btn-warning">修改</button>
										<button class="btn btn-danger ">删除</button>
									</td>
								</tr>
							</table>
						</div>
						<!--列表结束-->

					</div>
					<!--列表及操作结束-->
					<!--分页导航-->
					<center>
						<ul class="pagination ">
							<li>
								<a @click="getajax(1) ">首页</a>
							</li>
							<li>
								<a @click="getajax(page-1) ">上一页</a>
							</li>
							<li>
								<li v-for="value in showpage ">
									<a style="background: red; " @click="getajax(value) " v-if="page==value ">
										{{value}}
									</a>

									<a v-else @click="getajax(value) ">{{value}}</a>

								</li>
							</li>
							<li>
								<a @click="getajax(page+1) ">下一页</a>
							</li>
							<li>
								<a @click="getajax(countpage) ">尾页</a>
							</li>
						</ul>
					</center>
					<!--分页导航结束-->
				</div>
			</div>

			<!--查看弹出框 start-->
			<div class="modal" id="showUserInfo">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
							<span>&times;</span>
						</button>
							<h4>查看用户信息</h4>
						</div>

						<div class="modal-body">
							<table class="table table-bordered">
								<tr>
									<td><label>学号:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>姓名:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>性别:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>学院:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>班级:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>邮箱:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
								<tr>
									<td><label>电话:</label></td>
									<td><input class="form-control " type="text" readonly="readonly" /></td>
								</tr>
							</table>
						</div>
						<div class="modal-footer">
							<button class="btn btn-primary" data-dismiss="modal">确定</button>
						</div>
					</div>
				</div>
			</div>
			<!--查看弹出框 end-->

			<!--修改弹出框 start-->
			<div class="modal" id="modifyUserInfo">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
							<span>&times;</span>
						</button>
							<h4>修改用户信息</h4>
						</div>

						<div class="modal-body">
							<table class="table table-bordered">
								<tr>
									<td><label>学号:</label></td>
									<td><input class="form-control " type="text" /></td>
								</tr>
								<tr>
									<td><label>姓名:</label></td>
									<td><input class="form-control " type="text" /></td>
								</tr>
								<tr>
									<td><label>性别:</label></td>
									<td><input class="form-control " type="text" /></td>
								</tr>
								<tr>
									<td><label>学院:</label></td>
									<td>
										<select class="form-control ">
											<option>软件学院</option>
											<option>管理学院</option>
										</select>
									</td>
								</tr>
								<tr>
									<td><label>班级:</label></td>
									<td><input class="form-control " type="text" /></td>
								</tr>
								<tr>
									<td><label>邮箱:</label></td>
									<td><input class="form-control " type="text" /></td>
								</tr>
								<tr>
									<td><label>电话:</label></td>
									<td><input class="form-control " type="text" /></td>
								</tr>
							</table>
						</div>
						<div class="modal-footer">
							<button class="btn btn-danger">确定</button>
							<button class="btn btn-primary" data-dismiss="modal">取消</button>
						</div>
					</div>
				</div>
			</div>
			<!--修改弹出框 end-->

			<!--添加弹出框 start-->
			<div class="modal" id="addUserInfo">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
							<span>&times;</span>
						</button>
							<h4>添加用户信息</h4>
						</div>

						<div class="modal-body">
							<table class="table table-bordered">
								<tr>
									<td><label>学号:</label></td>
									<td><input class="form-control " type="text" /></td>
								</tr>
								<tr>
									<td><label>姓名:</label></td>
									<td><input class="form-control " type="text" /></td>
								</tr>
								<tr>
									<td><label>性别:</label></td>
									<td><input class="form-control " type="text" /></td>
								</tr>
								<tr>
									<td><label>学院:</label></td>
									<td>
										<select class="form-control ">
											<option>软件学院</option>
											<option>管理学院</option>
										</select>
									</td>
								</tr>
								<tr>
									<td><label>班级:</label></td>
									<td><input class="form-control " type="text" /></td>
								</tr>
								<tr>
									<td><label>邮箱:</label></td>
									<td><input class="form-control " type="text" /></td>
								</tr>
								<tr>
									<td><label>电话:</label></td>
									<td><input class="form-control " type="text" /></td>
								</tr>
							</table>
						</div>
						<div class="modal-footer">
							<button class="btn btn-danger">确定</button>
							<button class="btn btn-primary" data-dismiss="modal">取消</button>
						</div>
					</div>
				</div>
			</div>
			<!--添加改弹出框 end-->

			<!--导入用户-->
			<div class="modal" id="importUserInfo">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
							<span>&times;</span>
							<span class="sr-only">Close</span>
						</button>
							<h3>导入用户</h3>
						</div>
						<div class="modal-body">
							<div class="form-group form-inline">
								<input v-show="fileupView" id="fileSelect" name="fileSelect" @change="update" ref="inputer" type="file" />
							</div>
							<div class="progress">
								<div class="progress-bar" style="width: 20%;"></div>
							</div>
						</div>
						<div class="modal-footer  form-inline">
							<div class="form-group">

								<button @click="fileupdate" data-dismiss="modal" class="btn btn-primary">导入</button>
								<button class="btn btn-danger" data-dismiss="modal">取消</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--导入用户结束-->

			<!--导出用户-->
			<div class="modal" id="exportUserInfo">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
							<span>&times;</span>
							<span class="sr-only">Close</span>
						</button>
							<h3>导出入用户</h3>
						</div>
						<div class="modal-body">
							<div class="progress">
								<div class="progress-bar" style="width: 20%;"></div>
							</div>
						</div>
						<div class="modal-footer  form-inline">
							<div class="form-group">
								<button @click="fileupdate" data-dismiss="modal" class="btn btn-primary">导出</button>
								<button class="btn btn-danger" data-dismiss="modal">取消</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--导出用户结束-->

	</body>

</html>